<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html">
	
<head>
<title>Cubic facets</title>
<meta charset="utf-8"></meta>
<!-- Viewport image scale for the mobile phone initial scale set to 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta name="description" content="Descrizione Prova"></meta>
<meta name="keywords" content="Chiavi Prova"></meta>
<meta name="author" content="Nome del Gruppo"></meta>
<!-- CSS Class Region -->
<link rel="stylesheet" href="css/bootstrap.css" ></link>
<link rel="stylesheet" href="css/style.css"></link>
<link rel="stylesheet" href="css/cubo.css"></link>
<link rel="stylesheet" href="fonts/font-awesome.css"></link>
<!-- JS Class Region -->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<!--[if lt IE 9]>
    <div style='text-align:center'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></img></a></div>  
  <![endif]-->
  <!-- Display dell'errore di HTML5 Responsive non supportato -->
  <!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

  <!-- HTML5 shim and Respond.js IE8 supporto per HTML5 -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
</head>
<body onLoad="populate()">
<!--header-->
<!--header-->
<header>
    <div class="container">
        <div class="row">
            <article class="col-lg-12 col-md-12 col-sm-12">
			<div class="home_div_src">
				<div align="center">
				
				<h:form>
					<table style="width: 100%">
					<tr>					
							<td COLSPAN="3" align="center"><a href="main.xhtml"><img src="img/logo.png" alt="" style="padding-top: 2px"></img></a></td>
					</tr>
						<tr>
							<td style="width: 95%"><h:inputText value="#{mainBean.queryString}" class="textbox" id="thequery" style="width: 100%"></h:inputText></td>
							<td>&nbsp;</td>
							<td style="width: 5%"><h:commandButton value="Submit Query" action="results" class="search_button"></h:commandButton></td>
							<td style="width: 5%"><h:commandButton value="Cube" action="cubo" class="search_button"></h:commandButton></td>
						</tr>
					</table>
				</h:form>
				</div> 
			</div>
            </article>
        </div>
    </div>
</header>
<div class="global indent">
    <!--content-->
    <div class="container">
        <div class="row">
            <article class="col-lg-12 col-md-12 col-sm-12 privacyBox">
					<div align="center">						
					<section id="informazioni">
						<span><h3>Onthe cube you can see the occurrence of the most popular snippets</h3>Move your mouse over the cube, for stop rotation, Left Click. For add to Query click on "Look!"</span>
					</section>
					<br />
						<table>
							<tr>
								<td><input type="button" onClick="strafe_left()" value="SX"></input></td>
								<td><input type="button" onClick="strafe_center()" value="CENTER"></input></td>
								<td><input type="button" onClick="strafe_right()" value="RX"></input></td>
								<td COLSPAN="3">&nbsp;<input type="button" onClick="zoom_in()" value="Zoom IN"></input>&nbsp;<input type="button" onClick="zoom_out()" value="Zoom OUT"></input></td>
								<td>&nbsp;&nbsp;&nbsp;X:</td><td> <input id="rotate_x" type="range" max="360" min="0" value="0" onchange="rotate()"></input></td>
								<td>&nbsp;&nbsp;&nbsp;Y:</td><td> <input id="rotate_y" type="range" max="360" min="0" value="130" onchange="rotate()"></input></td>
								
								
							</tr>
						</table>	
					</div>
					<div style="display: none">
					<textarea id="raw_content">
					//EXAMPLE{imdb=0, award=2, guitar=0, actor=0, band=0, keyword=0, drums=0, bass=0, allmusic=0, basket=0, nba=0, lakers=0, toronto raptors=0, chicago bulls=0, miami heat=0, book=4, leggere editore=73, ebook=0, movies=0, oscar=1, dvd=0, showtime=0, cast=0, soundtrack=0, soccer=0, world cup=1, real madrid=0, espn=0, golden ball=0, team=0, albums=0, games=0, hockey=0, stamps=0, stocks=0, tennis=0, discography=0, rolling stones=0, virgin records=0, xbox=0, wii=0, ps3=0, ps4=0, psp=0, francobolli=0, nasdaq=0, wimbledon=0, roland garros=0, federer=0, nadal=0, djokovic=0, barcelona=0, bayern=0, liga=0, premier league=0, bundesliga=0, messi=0, ronaldo=0, guardiola=0, mourinho=0, ibrahimovic=0, hyunday=0, auto=0, car=0, nissan=0, toyota=0, wolkswagen=0, mercedes=0, ferrari=0, ford=0, bmw=0, audi=0, honda=0, amazon=0, genre=0, price=1, comedy=0, disney=0, camera=0, canon=0, gopro=0, fujifilm=0, samsung=0, sony=0, yahoo=0, msn=0, aol=0, college=0, usa today=73, foxsports=0, tripadvisor=0, princeton=0, mit=0, oxford=0, cambridge=0}&quot;
					#{mainBean.result.facet2frequency}"
					</textarea>
					</div>
					<div id="cube_view">
					<section id="rubik">
						<div id="cubo-container">
							<div id="cubo-viewport">
								<div id="cubo" style="-webkit-transform: rotateX(0deg) rotateY(130deg)">
								<!-- FACCIA 1 -->                           
									<div class="f_1_11 faccetta"></div>
									<div class="f_1_21 faccetta"></div>
									<div class="f_1_31 faccetta"></div>
									<div class="f_1_12 faccetta"></div>
									<div class="f_1_22 faccetta"></div>
									<div class="f_1_32 faccetta"></div>
									<div class="f_1_13 faccetta"></div>
									<div class="f_1_23 faccetta"></div>
									<div class="f_1_33 faccetta"></div>

								<!-- FACCIA 2 -->          
									<div class="f_2_11 faccetta"></div>
									<div class="f_2_21 faccetta"></div>
									<div class="f_2_31 faccetta"></div>        
									<div class="f_2_12 faccetta"></div>
									<div class="f_2_22 faccetta"></div>
									<div class="f_2_32 faccetta"></div>
									<div class="f_2_13 faccetta"></div>
									<div class="f_2_23 faccetta"></div>
									<div class="f_2_33 faccetta"></div>
								
								<!-- FACCIA 3 -->            
									<div class="f_3_11 faccetta"></div>
									<div class="f_3_21 faccetta"></div>
									<div class="f_3_31 faccetta"></div>        
									<div class="f_3_12 faccetta"></div>
									<div class="f_3_22 faccetta"></div>
									<div class="f_3_32 faccetta"></div>
									<div class="f_3_13 faccetta"></div>
									<div class="f_3_23 faccetta"></div>
									<div class="f_3_33 faccetta"></div>
								
								<!-- FACCIA 4 -->    
									<div class="f_4_11 faccetta"></div>
									<div class="f_4_21 faccetta"></div>
									<div class="f_4_31 faccetta"></div>
									<div class="f_4_12 faccetta"></div>
									<div class="f_4_22 faccetta"></div>
									<div class="f_4_32 faccetta"></div> 
									<div class="f_4_13 faccetta"></div>
									<div class="f_4_23 faccetta"></div>
									<div class="f_4_33 faccetta"></div> 
								
								<!-- FACCIA 5 -->      
									<div class="f_5_11 faccetta"></div>
									<div class="f_5_21 faccetta"></div>
									<div class="f_5_31 faccetta"></div>
									<div class="f_5_12 faccetta"></div>
									<div class="f_5_22 faccetta"></div>
									<div class="f_5_32 faccetta"></div>
									<div class="f_5_13 faccetta"></div>
									<div class="f_5_23 faccetta"></div>
									<div class="f_5_33 faccetta"></div>
								
								<!-- FACCIA 6 -->     
									<div class="f_6_11 faccetta"></div>
									<div class="f_6_21 faccetta"></div>
									<div class="f_6_31 faccetta"></div>
									<div class="f_6_12 faccetta"></div>
									<div class="f_6_22 faccetta"></div>
									<div class="f_6_32 faccetta"></div>
									<div class="f_6_13 faccetta"></div>
									<div class="f_6_23 faccetta"></div>
									<div class="f_6_33 faccetta"></div>
									  
								 </div>
							</div>
						</div>  
						</section>
					</div>
            </article>
        </div>
    </div>
</div>
<!--footer-->
<footer>
    <div class="container">
        <div class="row">
            <article class="col-lg-12 col-md-12 col-sm-12">
                <p><span>Tag Cloud</span> </p>
                <ul>
                    <li><a href="#"><img src="img/follow_icon1.png" alt=""></img></a></li>
                    <li><a href="#"><img src="img/follow_icon2.png" alt=""></img></a></li>
                    <li><a href="#"><img src="img/follow_icon4.png" alt=""></img></a></li>
                </ul>
            </article>
        </div>
    </div>
</footer>
<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>
<script src="js/cubo.js"></script>
</body>
</html>
	
	
<!--
<h:head>
	<title>JSF 2.0</title>
</h:head>
<h:body bgcolor="white">
		
	<h2>Pagina del cubo!</h2>
	<h3>JSF 2.0 - results.xhtml</h3>
	<h4>Every facet of the cube links to a custom research:</h4>
    	PROVA
    	Questa è una mappa:
    	Giovanni, devi estarre ogni coppia parola,occorrenza, e per ciascusa coppia, la devi linkare a una faccia del cubo.
    	Se clicchi deve partire la ricerca per quella parola.
    	#{mainBean.result.facet2frequency}"


	<h:outputLabel rendered="#{empty mainBean.result}"> NOTHING FOUND! PLEASE TRY AGAIN</h:outputLabel>
	<h:form>
		<h:commandButton value="New Search" action="main"></h:commandButton>
	</h:form>
</h:body>
</html>
-->
